<template>
    <div>
        <h1>{{ counter.name}}</h1>
        <p>Count: {{ counter.count}}</p>
        <p>DoubleCount: {{ counter.doubleCount}}</p>
        <button type="button" @click="counter.increment()">Increment</button>
        |
        <button type="button" @click="counter.decrement()">减1</button>
        |
        <button type="button" @click="changeName()">修改名字</button>

    </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'
// 获取store实例
const counter = useCounterStore()
// 在组件方法中调用store实例的方法
const changeName = () => {
    counter.setName('你好白娘子')
}
</script>